{% load crispy_forms_filters %}
{% load l10n %}

<div id="div_{{ field.id_for_label }}">
  <label class="form-label custom-control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
  <select id="{{ field.id_for_label }}" style="display:none" name="{% if field.name|wordcount > 1 %}{{ field.name|slugify }}{% else %}{{ field.name }}{% endif %}" multiple class="{% if field_class %}{{ field_class }} {% endif %}multi-with-add mb-3"{% if flat_attrs %} {{ flat_attrs }}{% endif %}>

      {% for group, options, index in field|optgroups %}
        {% for option in options %}
        <option value="{{ option.value }}" {% if option.value in field.value %}selected{% endif %}>{{ option.value.instance.name }}</option>
        {% endfor %}
      {% endfor %}
      {% if field.errors and inline_class %}
          {% for error in field.errors %}
              <p id="error_{{ forloop.counter }}_{{ field.auto_id }}" class="text-danger mb-0"><small><strong>{{ error }}</strong></small></p>
          {% endfor %}
      {% endif %}

      {% include 'bootstrap5/layout/help_text.html' %}
  </select>
</div>
